<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            padding: 20px;
            border: 20px solid #333;
            margin: 20px;
            background-color: skyblue;
            background-clip: content-box;

            /* display: none; */
            /* visibility: hidden; */   /*与 display 属性类似。然而，不同的是，如果您设置 display:none，将隐藏整个元素，如果您设置 visibility:hidden，元素的内容将不可见，但元素仍保持原来的位置和大小。*/

            box-sizing: border-box;  /*元素的总高度和宽度包含内边距和边框(padding 与 border) :*/
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        /* 
        获取元素尺寸
          + 注意：
            1.不管该元素是否隐藏，都能够获取到该元素的值
            2.不管盒子模型是什么状态，拿到的尺寸区域不变
        */

        // 1.width() 和 height()
        // 获取到的就是元素内容区域的尺寸
        console.log($('div').width())
        console.log($('div').height())

        console.log('_________________')
        // 2.innerWidth() 和 innerHeight()
        console.log($('div').innerWidth())
        console.log($('div').innerWidth());

        console.log('____________________');
        // 3.outerWidth() 和 outerHeight()
        console.log($('div').outerWidth());
        console.log($('div').outerHeight());

        console.log('__________________');
        // 4.outerWidth(true) 和 outerHeight(true)
        // 拿到包含你设置的 margin 尺寸值
        console.log($('div').outerWidth(true));
        console.log($('div').outerHeight(true));
    </script>
</body>
</html>